<script setup>
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import DetailBar from '@/components/DetailBar.vue';
import Loading from '@/components/Loading.vue';
import http from '@/utils/http';
import useNightModeStore from "@/stores/nightModeStore";
const nightModeStore=useNightModeStore();




const route = useRoute();
let storyid = route.params.storyid;//从路由对象里获取路由参数
let story = reactive({ story: null, storyextra: { comments: 0, popularity: 0 } });//定义一个响应式数据来存储内容详情
http.get(`/story/${storyid}`).then(result => {//ajax获取后台数据，是一个异步过程
    console.log("详情===>", result);
    story.story = result.data.story;
});
http.get(`/story/${storyid}/extra`).then(re => {
    story.storyextra = re.data;
});
</script>
<template>
    <!-- <div v-if="story.story!=null"> -->
    <div :class="['body',nightModeStore.isNight?'night':'']" v-if="story.story">
        <div class="headline">
            <img :src="story.story.image" />
            <div
                :style="{ background: `linear-gradient(to top,${story.story.imageHue.replace('0x', '#')},rgba(255,255,255,0.2)` }">
                <h1>{{ story.story.title }}</h1>
            </div>
        </div>
        <div>

            <div v-html="story.story.body"></div>
        </div>

    </div>



    <div v-else class="loadingbox">
        <Loading />
    </div>
    <DetailBar :extra="story.storyextra" :storyid="parseInt(storyid)" />
</template>
<style scoped>
.body.night .left{
    background-color: #555;
    color:#fff;
}

.body .left{
    color: #000;
}
.body.night{
    background-color: #555;
    color:#fff;
}

.headline {
    position: relative;
}

.headline img {
    width: 100%;
    height: auto;
}

.headline div {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0px;
    display: flex;
    align-items: center;
}

.headline div h1 {
    padding: 0px 20px;
    font-size: 16px;
    line-height: 30px;
    color: white;
    font-family: "微软雅黑", "宋体", "正楷";
    font-weight: normal;
}

:deep(.meta) {
    padding: 30px 20px;
    font-size: 13px;
}

:deep(.meta .avatar) {
    display: none;
}

:deep(.meta .originUrl) {
    display: inline;
    color: rgb(15, 164, 232);
    font-weight: bold;
}

:deep(.content) {
    overflow: hidden;
    padding: 0px 20px;
    font-size: 13px;
    font-family: "微软雅黑";
    line-height: 26px;
}

:deep(.content img) {
    width: 100%;
    height: auto;
}

:deep(.content p) {
    text-indent: 2em;
}
</style>
